/**
 * @author nttdocomo
 */
define(function(require) {
	require("../container/container");
	require("./tool")
	aries.klass("aries.panel.Header", aries.container.Container.extend({

		/**
		 * @property {Boolean} isHeader
		 * `true` in this class to identify an objact as an instantiated Header, or subclass thereof.
		 */
		isHeader : true,
		defaultType : aries.panel.Tool,
		indicateDrag : false,
		weight : -1,
		componentLayout : 'body',

		/**
		 * @cfg {String} [titleAlign='left']
		 * May be `"left"`, `"right"` or `"center"`.
		 *
		 * The alignment of the title text within the available space between the icon and the tools.
		 */
		titleAlign : 'left',

		childEls : ['body'],

		renderTpl : ['<div id="<%=id%>-body" class="<%=baseCls%>-body <%=bodyCls%>', '<%_.each(uiCls,function(item){%> <%=baseCls%>-body-<%=ui%>-<%=item%><%})%>"', '<%if(typeof(bodyStyle)!=="undefined"){%> style="<%=bodyStyle%>"<%}%>>', '<%=titleCmp%>', '</div>'].join(""),

		headingTpl : '<span id="<%=id%>-textEl" class="<%=cls%>-text <%=cls%>-text-<%=ui%>"><%=title%></span>',

		shrinkWrap : 3,

		initComponent : function() {
			var me = this, ruleStyle, rule, style, ui, tempEl;

			me.indicateDragCls = me.baseCls + '-draggable';
			me.title = me.title || '&#160;';
			me.tools = me.tools || [];
			me.items = me.items || [];
			me.orientation = me.orientation || 'horizontal';
			me.dock = (me.dock) ? me.dock : (me.orientation == 'horizontal') ? 'top' : 'left';

			//add the dock as a ui
			//this is so we support top/right/left/bottom headers
			me.addClsWithUI([me.orientation, me.dock]);

			if (me.indicateDrag) {
				me.addCls(me.indicateDragCls);
			}

			// Add Icon
			if (!aries.isEmpty(me.iconCls) || !aries.isEmpty(me.icon)) {
				me.initIconCmp();
				me.items.push(me.iconCmp);
			}

			// Add Title
			if (me.orientation == 'vertical') {
				me.layout = {
					type : 'vbox',
					align : 'center'
				};
				me.textConfig = {
					width : 16,
					cls : me.baseCls + '-text',
					type : 'text',
					text : me.title,
					rotate : {
						degrees : 90
					}
				};
				ui = me.ui;
				if (Ext.isArray(ui)) {
					ui = ui[0];
				}
				ruleStyle = '.' + me.baseCls + '-text-' + ui;
				if (Ext.scopeResetCSS) {
					ruleStyle = '.' + Ext.baseCSSPrefix + 'reset ' + ruleStyle;
				}
				rule = Ext.util.CSS.getRule(ruleStyle);

				// We might have been disallowed access to the stylesheet: https://sencha.jira.com/browse/EXTJSIV-5084
				if (rule) {
					style = rule.style;
				} else {
					style = ( tempEl = Ext.getBody().createChild({
						style : 'position:absolute',
						cls : me.baseCls + '-text-' + ui
					})).getStyles('fontFamily', 'fontWeight', 'fontSize', 'color');
					tempEl.remove();
				}
				if (style) {
					Ext.apply(me.textConfig, {
						'font-family' : style.fontFamily,
						'font-weight' : style.fontWeight,
						'font-size' : style.fontSize,
						fill : style.color
					});
				}
				me.titleCmp = new Ext.draw.Component({
					width : 16,
					ariaRole : 'heading',
					focusable : false,
					viewBox : false,
					flex : 1,
					id : me.id + '_hd',
					autoSize : true,
					items : me.textConfig,
					xhooks : {
						setSize : function(width) {
							// don't pass 2nd arg (height) on to setSize or we break 'flex:1'
							this.callParent([width]);
						}
					},
					// this is a bit of a cheat: we are not selecting an element of titleCmp
					// but rather of titleCmp.items[0]
					childEls : [{
						name : 'textEl',
						select : '.' + me.baseCls + '-text'
					}]
				});
			} else {
				me.layout = {
					type : 'container.hbox',
					align : 'middle'
				};
				me.titleCmp = new aries.Component({
					ariaRole : 'heading',
					focusable : false,
					noWrap : true,
					flex : 1,
					id : me.id + '_hd',
					style : 'text-align:' + me.titleAlign,
					cls : me.baseCls + '-text-container',
					renderTpl : me.getTpl('headingTpl'),
					renderData : {
						title : me.title,
						cls : me.baseCls,
						ui : me.ui
					},
					childEls : ['textEl']
				});
			}
			me.items.push(me.titleCmp);

			// Add Tools
			me.items = me.items.concat(me.tools);
			aries.container.Container.prototype.initComponent.apply(this, arguments);

			/*me.on({
			 dblclick : me.onDblClick,
			 click : me.onClick,
			 element : 'el',
			 scope : me
			 });*/
		},

		/**
		 * Add bodyCls to the renderData object
		 * @return {Object} Object with keys and values that are going to be applied to the renderTpl
		 * @private
		 */
		initRenderData : function() {
			return _.extend(aries.container.Container.prototype.initRenderData.apply(this,arguments), {
				renderContainer:function(){
					return "title"
				},
				titleCmp:this.titleCmp.html(),
				bodyCls : this.bodyCls
			});
		}
	}))
})
